<template>
	<view class="video0">
		<view class="video1">
			<video class="vue3VideoPlay" id="myVideo" :src="videoUrl" poster="http://portal.xumengte.com/homeImg/bgc1.png"
				@error="videoErrorCallback" autoplay loop muted :controls="false" :webkit-playsinline="true"
				:x-webkit-airplay="true" playsinlin>
			</video>
		</view>
	</view>
</template>
<script>
	export default {
		computed: {

		},
		created() {},
		mounted() {},
		methods: {
			videoErrorCallback: function() {
				uni.showModal({
					content: '视频加载失败',
					showCancel: false
				});
			},
		},
		data() {
			return {};
		},
		props: {
			videoUrl: {
				type: String,
				default: 'http://portal.xumengte.com/airtoall/homeVideo.mp4'
			},
		}
	}
</script>
<style>
	.video0 {
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: -1 !important;
	}

	.video1 {
		z-index: -1 !important;
		transform: translate(11%, -11%);
	}

	.vue3VideoPlay {
		width: 100%;
		z-index: -1 !important;
		height: calc(100vh - 6px);
	}
</style>
